
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>
<meta charset="utf-8">
<title>Boo Admin - Form Elements</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="assets/css/lib/bootstrap.css" rel="stylesheet">
<link href="assets/css/lib/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/extension.css" rel="stylesheet">
<link href="assets/css/boo.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/boo-coloring.css" rel="stylesheet">
<link href="assets/css/boo-utility.css" rel="stylesheet">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <script src="assets/plugins/selectivizr/selectivizr-min.js"></script>
    <script src="assets/plugins/flot/excanvas.min.js"></script>
<![endif]-->

<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
</head>

<body class="sidebar-left panel-side">
<div class="page-container">
    <div id="header-container">
        <div id="header">
            <div class="navbar navbar-inverse navbar-fixed-top">
                <div class="navbar-inner">
                    <div class="container-fluid">
                        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                        <a class="brand" href="javascript:void(0);"><img src="assets/img/demo/logo-brand.png"></a>
                        <div class="search-global">
                            <input id="globalSearch" class="search search-query input-medium" type="search">
                            <a class="search-button" href="javascript:void(0);"><i class="fontello-icon-search-5"></i></a> </div>
                        <div class="nav-collapse collapse">
                            <ul class="nav user-menu visible-desktop">
                                <li><a class="btn-glyph fontello-icon-edit tip-bc" href="javascript:void(0);" title="Messages"><span class="badge badge-important">8</span></a></li>
                                <li><a class="btn-glyph fontello-icon-mail-1 tip-bc" href="javascript:void(0);" title="Emails"></a></li>
                                <li><a class="btn-glyph fontello-icon-lifebuoy tip-bc" href="javascript:void(0);" title="Support"><span class="badge badge-important">4</span></a></li>
                            </ul>
                            <ul class="nav">
                                <li> <a href="dashboard-one.html">Dashboard</a> </li>
                                <li class="active"> <a href="javascript:void(0);">Components</a> </li>
                                <li> <a href="component-fullcalendar-demo.html"><span class="fontello-icon-calendar"></span>Calendar</a> </li>
                                <li> <a href="javascript:void(0);"><span class="fontello-icon-users"></span>Contacts</a> </li>
                                <li class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"><span class="fontello-icon-list-1"></span>Customize <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="component-form-demo.html">Demo Form</a></li>
                                        <li><a href="component-widgets-remember.html">Remember</a></li>
                                        <li><a href="component-widgets-users.html">User List</a></li>
                                        <li class="divider"></li>
                                        <li class="nav-header">Next Update</li>
                                        <li><a href="javascript:void(0);">Contacts</a></li>
                                        <li><a href="javascript:void(0);">Email</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- // navbar -->
            
            <div class="header-drawer">
                <div class="mobile-nav text-center visible-phone"> <a href="javascript:void(0);" class="mobile-btn" data-toggle="collapse" data-target=".sidebar"><i class="aweso-icon-chevron-down"></i> Components</a> </div>
                <!-- // Resposive navigation -->
                <div class="breadcrumbs-nav hidden-phone">
                    <ul id="breadcrumbs" class="breadcrumb">
                        <li><a href="javascript:void(0);"><i class="fontello-icon-home f12"></i> Dashboard</a> <span class="divider">/</span></li>
                        <li class="dropdown"><a href="javascript:void(0);">Table </a> <span class="divider">/</span>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0);">Table</a></li>
                                <li><a href="javascript:void(0);">Elements</a></li>
                                <li><a href="javascript:void(0);">Elements</a></li>
                                <li><a href="javascript:void(0);">Elements</a></li>
                            </ul>
                        </li>
                        <li class="active">Boo Admin </li>
                    </ul>
                </div>
                <!-- // breadcrumbs --> 
            </div>
            <!-- // drawer --> 
        </div>
    </div>
    <!-- // header-container -->
    
    <div id="main-container">
        <div id="main-sidebar" class="sidebar sidebar-inverse">
            <div class="sidebar-item">
                <div class="media profile">
                    <div class="media-thumb media-left thumb-bordereb"> <a class="img-shadow" href="javascript:void(0);"><img class="thumb" src="assets/img/demo/demo-avatar9604.jpg"></a> </div>
                    <div class="media-body">
                        <h5 class="media-heading">Twitter Bootstrap <small>as Administrator</small></h5>
                        <p class="data">Last Access: 16 May 15:30</p>
                    </div>
                </div>
            </div>
            <!-- // sidebar item - profile -->
            
            <ul id="mainSideMenu" class="nav nav-list nav-side">
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accDash" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-monitor"></span> <i class="chevron fontello-icon-right-open-3"></i> Dashboards </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accDash">
                        <li> <a href="dashboard-one.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Dashboard</span> Demo 1 </a> </li>
                        <li> <a href="dashboard-two.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Dashboard</span> Demo 2 </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Dashboard -->
                <li class="accordion-group">
                    <div class="accordion-heading active"> <a href="#accForms" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon aweso-icon-list-alt"></span><i class="chevron fontello-icon-right-open-3"></i> Form </a> </div>
                    <ul class="accordion-content nav nav-list collapse in" id="accForms">
                        <li> <a href="component-form-demo.html"> <i class="fontello-icon-right-dir"></i> Demo Form </a> </li>
                        <li class="active"> <a href="component-form-element.html"> <i class="fontello-icon-right-dir"></i> Form Element </a> </li>
                        <li> <a href="component-form-extension.html"> <i class="fontello-icon-right-dir"></i> Form Extension</a> </li>
                        <li> <a href="component-form-wizard.html"> <i class="fontello-icon-right-dir"></i> Form Wizard</a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Forms -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accTables" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-align-justify"></span> <i class="chevron fontello-icon-right-open-3"></i> Tables </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accTables">
                        <li> <a href="component-table.html"> <i class="fontello-icon-right-dir"></i> Base Table </a> </li>
                        <li> <a href="component-table-boo.html"> <i class="fontello-icon-right-dir"></i> Boo Table </a> </li>
                        <li> <a href="component-table-datatable.html"> <i class="fontello-icon-right-dir"></i> DataTable </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Tables -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accStatistics" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-chart"></span> <i class="chevron fontello-icon-right-open-3"></i> Statistics </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accStatistics">
                        <li> <a href="statistic-flot.html"> <i class="fontello-icon-right-dir"></i> Charts </a> </li>
                        <li> <a href="statistic-sparkline.html"> <i class="fontello-icon-right-dir"></i> Sparklines </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Statistics -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accWidgets" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon  fontello-icon-window"></span> <i class="chevron fontello-icon-right-open-3"></i> Widgets </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accWidgets">
                        <li> <a href="component-widget-style.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Widgets </span> Style </a> </li>
                        <li> <a href="component-widget-custom.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Widgets </span> Custom </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Widgets -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accButtons" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-puzzle"></span> <i class="chevron fontello-icon-right-open-3"></i> UI Elements </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accButtons">
                        <li> <a href="elements-button.html"> <i class="fontello-icon-right-dir"></i> Button </a> </li>
                        <li> <a href="elements-icon-font.html"> <i class="fontello-icon-right-dir"></i> Iconic fonts </a> </li>
                        <li> <a href="elements-icon-fugue-demo.html"> <i class="fontello-icon-right-dir"></i> Icon </a> </li>
                        <li> <a href="elements-wells.html"> <i class="fontello-icon-right-dir"></i> Wells </a> </li>
                        <li> <a href="elements-tabs.html"> <i class="fontello-icon-right-dir"></i> Tabs </a> </li>
                        <li> <a href="elements-modals.html"> <i class="fontello-icon-right-dir"></i> Modal </a> </li>
                        <li> <a href="elements-progressbar.html"> <i class="fontello-icon-right-dir"></i> Progressbar </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu UI Elements -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accCalendar" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-calendar"></span> <i class="chevron fontello-icon-right-open-3"></i> Calendar </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accCalendar">
                        <li> <a href="component-fullcalendar-demo.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Calendar </span> Demo </a> </li>
                        <li> <a href="component-fullcalendar.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Calendar </span> Style </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Calendar -->
            </ul>
            <!-- // sidebar menu -->
            
            <div class="sidebar-item"></div>
            <!-- // sidebar item --> 
            
        </div>
        <!-- // sidebar -->
        
        <div id="main-content" class="main-content container-fluid">
            <div class="row-fluid page-head">
                <h2 class="page-title"><i class="aweso-icon-list-alt"></i> Forms elements <small></small></h2>
                <div class="page-bar">
                    <div class="btn-toolbar"> </div>
                </div>
            </div>
            <!-- // page head -->
            
            <div id="page-content" class="page-content">
                <section>
                    <div class="row-fluid">
                        <form id="formA" class="span12">
                            <div class="page-header">
                                <h3><i class="fontello-icon-article-alt opaci35"></i> Inputs <small>elements</small></h3>
                            </div>
                            <div class="row-fluid margin-bottom30">
                                <div class="span5">
                                    <fieldset>
                                        <legend>Input fields <small>DEFAULT</small></legend>
                                        <label for="formA01">Usual input field:</label>
                                        <input id="formA01" type="text">
                                        <!-- // form item -->
                                        
                                        <label for="formA02"> Notice for field: <span class="help-inline">Info for label here.</span> </label>
                                        <input id="formA02" type="text">
                                        <span class="help-inline">This is an inline comment.</span>
                                        <p class="help-block"><strong>Note:</strong> Boo Admin Template version 1.0</p>
                                        <!-- // form item -->
                                        
                                        <label for="formA03">Textarea:</label>
                                        <textarea id="formA03" rows="3"></textarea>
                                        <!-- // form item -->
                                    </fieldset>
                                    <!-- // fieldset Input --> 
                                </div>
                                <div class="span7 well well-nice">
                                    <fieldset>
                                        <legend>Input fields <small>IN WELL</small></legend>
                                        <label for="formA04">Usual input field:</label>
                                        <input id="formA04" class="input-block-level" type="text" placeholder="placeholder">
                                        <!-- // form item -->
                                        
                                        <label for="formA05"> Notice for field: <span class="help-inline">Info for label here.</span> </label>
                                        <input id="formA05" class="span6" type="text" placeholder="placeholder">
                                        <span class="help-inline">This is an inline comment.</span>
                                        <p class="help-block"><strong>Note:</strong> Boo Admin Template version 1.0</p>
                                        <!-- // form item -->
                                        
                                        <label for="formA06">Textarea:</label>
                                        <textarea id="formA06" class="input-block-level" rows="3" placeholder="placeholder"></textarea>
                                        <!-- // form item -->
                                    </fieldset>
                                    <!-- // fieldset Input Grid Sizig --> 
                                </div>
                            </div>
                            <!-- // Sample row -->
                            
                            <div class="page-header">
                                <h3><i class="fontello-icon-article-alt opaci35"></i> Selects <small>elements</small></h3>
                            </div>
                            <div class="row-fluid margin-bottom30">
                                <div class="span5">
                                    <fieldset>
                                        <legend>Select <small>DEFAULT</small></legend>
                                        <p>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once. Plugin style <code>.selecttwo or .selectpicker</code></p>
                                        <label for="formA07">Select:</label>
                                        <select id="formA07">
                                            <option value="1">item 1</option>
                                            <option value="2">item 2</option>
                                            <option value="3">item 3</option>
                                        </select>
                                        <!-- // form item -->
                                        
                                        <label for="formA10">Select multiple: <span class="help-inline">span6</span> </label>
                                        <select id="formA10" class="span4" multiple="multiple">
                                            <option value="1">item 1</option>
                                            <option value="2">item 2</option>
                                            <option value="3">item 3</option>
                                            <option value="4">item 4</option>
                                            <option value="5">item 5</option>
                                            <option value="6">item 6</option>
                                        </select>
                                        <!-- // form item -->
                                        
                                    </fieldset>
                                    <!-- // fieldset Select --> 
                                </div>
                                <div class="span7 well well-nice">
                                    <fieldset>
                                        <legend>Select <small>PLUGIN Style</small></legend>
                                        <!-- ? form inlinedo not use class span*  -->
                                        <label for="formA07a">Select as Bootstrap Button dropdowns - inline</label>
                                        <select id="formA07a" class="selectpicker">
                                            <option value="1">item 1</option>
                                            <option value="2">item 2</option>
                                            <option value="3">item 3</option>
                                        </select>
                                        <select id="formA07f" class="selectpicker-info">
                                            <option value="1">item 1</option>
                                            <option value="2">item 2</option>
                                            <option value="3">item 3</option>
                                        </select>
                                        <p class="help-block">For simple selects on forms</p>
                                        <!-- // form item --> 
                                        
                                        <!-- ? To determine the length of the wrap select and specify the class -->
                                        
                                        <label for="formA07b">Select as Bootstrap Button dropdowns - set size to wrap <code>.selectpicker-block</code></label>
                                        <div class="selectpicker-block" style="width:275px">
                                            <select id="formA07b" class="selectpicker-info">
                                                <option value="1">item 1</option>
                                                <option value="2">item 2</option>
                                                <option value="3">item 3</option>
                                            </select>
                                        </div>
                                        <!-- // form item -->
                                        
                                        <label for="formA07c">Select - plugins:</label>
                                        <select id="formA07c" class="selecttwo span4">
                                            <option value="1">item 1</option>
                                            <option value="2">item 2</option>
                                            <option value="3">item 3</option>
                                        </select>
                                        <!-- // form item -->
                                        
                                        <label for="formA08">Select multiple - plugins:</label>
                                        <select id="formA08" multiple="multiple" class="selecttwo span4">
                                            <option value="1">item 1</option>
                                            <option value="2">item 2</option>
                                            <option value="3">item 3</option>
                                            <option value="4">item 4</option>
                                            <option value="5">item 5</option>
                                            <option value="6">item 6</option>
                                        </select>
                                        <!-- // form item -->
                                        
                                    </fieldset>
                                    <!-- // fieldset Select Grid Sizig --> 
                                </div>
                            </div>
                            <!-- // Sample row -->
                            
                            <div class="page-header">
                                <h3><i class="fontello-icon-article-alt opaci35"></i> Inputs <small>elements</small></h3>
                            </div>
                            <div class="row-fluid margin-bottom30">
                                <div class="span5">
                                    <fieldset>
                                        <legend>Checkbox <small>CLASS checkbox</small></legend>
                                        <label class="checkbox">
                                            <input class="checkbox" type="checkbox" value="option1">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing checkbox </label>
                                        <!-- // form item --> 
                                        
                                        <br>
                                        <label class="checkbox">
                                            <input id="formA11" class="checkbox" type="checkbox" value="option1">
                                            Option 1 - This is checkbox group </label>
                                        <label class="checkbox">
                                            <input id="formA12" class="checkbox" type="checkbox" value="option2" checked>
                                            Option 2 - checked </label>
                                        <label class="checkbox">
                                            <input id="formA13" class="checkbox" type="checkbox" value="option3" disabled>
                                            Option 3 - disabled </label>
                                        <!-- // form item --> 
                                        
                                        <br>
                                        <label class="checkbox inline">
                                            <input id="formA14" class="checkbox" type="checkbox" value="option4">
                                            Option 1 </label>
                                        <label class="checkbox inline">
                                            <input id="formA15" class="checkbox" type="checkbox" value="option5" checked>
                                            Option 2 </label>
                                        <label class="checkbox inline">
                                            <input id="formA16" class="checkbox" type="checkbox" value="option6" disabled>
                                            Option 2 </label>
                                        <!-- // form item -->
                                        
                                        <div class="margin-top30">
                                            <label>Checkbox as Button - Default</label>
                                            <div data-toggle="buttons-checkbox" class="btn-group">
                                                <button class="btn" type="button">Left</button>
                                                <button class="btn" type="button">Middle</button>
                                                <button class="btn" type="button">Right</button>
                                            </div>
                                            <p></p>
                                            <label>Checkbox as Button - Coloring selection</label>
                                            <div data-toggle="buttons-checkbox" class="btn-group margin-bottom10">
                                                <button class="btn" type="button" class-toggle="btn-blue">Left</button>
                                                <button class="btn btn-yellow active" type="button" class-toggle="btn-yellow">Middle</button>
                                                <button class="btn" type="button" class-toggle="btn-green">Right</button>
                                            </div>
                                        </div>
                                        <p class="help-block">Use <code>class-toggle="btn-yellow"</code> set the color of choice.</p>
                                    </fieldset>
                                    <!-- // fieldset Checkbox --> 
                                </div>
                                <div class="span7 well well-nice">
                                    <fieldset>
                                        <legend>Radio <small>CLASS radio</small></legend>
                                        <label class="radio">
                                            <input class="radio" type="radio" value="option1">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing Radio </label>
                                        <!-- // form item --> 
                                        
                                        <br>
                                        <label class="radio">
                                            <input id="formA17" class="radio" type="radio" name="optionsRadio" value="option1">
                                            Option 1 - This is radio group </label>
                                        <label class="radio">
                                            <input id="formA18" class="radio" type="radio" name="optionsRadio" value="option2" checked>
                                            Option 2 - checked </label>
                                        <label class="radio">
                                            <input id="formA19" class="radio" type="radio" name="optionsRadio" value="option3" disabled>
                                            Option 3 - disabled </label>
                                        <!-- // form item --> 
                                        
                                        <br>
                                        <label class="radio inline">
                                            <input id="formA20" class="radio" type="radio" name="inlineRadio" value="option4">
                                            Option 1 </label>
                                        <label class="radio inline">
                                            <input id="formA21" class="radio" type="radio" name="inlineRadio" value="option5" checked>
                                            Option 2 </label>
                                        <label class="radio inline">
                                            <input id="formA22" class="radio" type="radio" name="inlineRadio" value="option6" disabled>
                                            Option 3 </label>
                                        <!-- // form item -->
                                        
                                        <div class="margin-top30">
                                            <label>Radio as Button</label>
                                            <div data-toggle="buttons-radio" class="btn-group">
                                                <button class="btn" type="button" class-toggle="btn-green">Left</button>
                                                <button class="btn btn-green active" type="button" class-toggle="btn-green">Middle</button>
                                                <button class="btn" type="button" class-toggle="btn-green">Right</button>
                                            </div>
                                        </div>
                                    </fieldset>
                                    <!-- // fieldset Radio --> 
                                </div>
                            </div>
                            <!-- // Sample row -->
                            
                            <div class="row-fluid margin-bottom30">
                                <div class="span5">
                                    <fieldset>
                                        <legend>Checkbox <small>TOOGLE Button</small></legend>
                                        <label>Checkbox as Toogle Button</label>
                                        <div id="default-tgbtn">
                                            <input type="checkbox" checked="checked">
                                        </div>
                                        <label>Toogle Button - styling</label>
                                        <div id="text-tgbtn">
                                            <input type="checkbox" checked="checked">
                                        </div>
                                        <p id="tgbtn-text" class="help-block">Status is: <strong>true</strong></p>
                                     </fieldset>
                                 </div> 
                                 <div class="span7">
                                    <fieldset>
                                        <legend>Checkbox <small>TOOGLE Button</small></legend>
                                        <label>Use all Boo colors</label>
                                        <div class="row-fluid">
                                        	<div class="span6">
                                                <div id="warning-tgbtn">
                                                    <input type="checkbox" checked="checked">
                                                </div>
                                                <br>
                                        
                                                <div id="danger-tgbtn">
                                                    <input type="checkbox" checked="checked">
                                                </div>
                                                <br>
                                        
                                                <div id="info-tgbtn">
                                                    <input type="checkbox" checked="checked">
                                                </div>
                                                <br>
                                        
                                                <div id="success-tgbtn">
                                                    <input type="checkbox" checked="checked">
                                                </div>
                                            </div>
                                            
                                            <div class="span6">
                                                <div id="blue-tgbtn">
                                                    <input type="checkbox" checked="checked">
                                                </div>
                                                <br>
                                        
                                                <div id="red-tgbtn">
                                                    <input type="checkbox" checked="checked">
                                                </div>
                                                <br>
                                        
                                                <div id="orange-tgbtn">
                                                    <input type="checkbox" checked="checked">
                                                </div>
                                                <br>
                                        
                                                <div id="yellow-tgbtn">
                                                    <input type="checkbox" checked="checked">
                                                </div>
                                            </div>
                                        </div>
                                     </fieldset>
                                 </div>
                             </div>
                            <!-- // Sample row -->
                            
                            <div class="row-fluid margin-bottom30">
                                <div class="span5">
                                    <fieldset>
                                        <legend>Prepended and appended inputs</legend>
                                        <label for="formA23">Prepended</label>
                                        <div class="input-prepend"> <span class="add-on">@</span>
                                            <input id="formA23" class="span5" size="16" type="text" placeholder="Username">
                                        </div>
                                        <label for="formA24">Appended</label>
                                        <div class="input-append">
                                            <input id="formA24" class="span5" size="16" type="text">
                                            <span class="add-on">.00</span> </div>
                                        <!-- // form item -->
                                        
                                        <label for="formA25">Combined</label>
                                        <div class="input-prepend input-append"> <span class="add-on">&nbsp; $ &nbsp;</span>
                                            <input id="formA25" class="span4" size="16" type="text">
                                            <span class="add-on">&nbsp; .00 &nbsp;</span> </div>
                                        <!-- // form item -->
                                        
                                    </fieldset>
                                    <!-- // fieldset Prepended and appended --> 
                                </div>
                                <div class="span7 well well-nice">
                                    <fieldset>
                                        <legend>Buttons instead of text</legend>
                                        <label for="formA26">Appended button</label>
                                        <div class="input-append">
                                            <input id="formA26" class="span4" size="16" type="text">
                                            <button class="btn" type="button">Go!</button>
                                        </div>
                                        <!-- // form item -->
                                        
                                        <label for="formA27">Appended two button</label>
                                        <div class="input-append">
                                            <input id="formA27" class="span4" size="16" type="text">
                                            <button class="btn" type="button">Search</button>
                                            <button class="btn" type="button">Options</button>
                                        </div>
                                        <!-- // form item -->
                                        
                                        <label for="formA28">Appended as bar</label>
                                        <div class="input-append btn-bar">
                                            <input id="formA28" class="span4" size="16" type="text">
                                            <button class="btn btn-glyph" type="button"><i class="fontello-icon-pencil-4"></i></button>
                                            <button class="btn btn-glyph" type="button"><i class="fontello-icon-arrows-cw"></i></button>
                                            <button class="btn btn-glyph" type="button"><i class="fontello-icon-check"></i></button>
                                            <button class="btn btn-glyph" type="button"><i class="fontello-icon-plus-1"></i></button>
                                            <button class="btn btn-glyph" type="button"><i class="fontello-icon-cancel-1"></i></button>
                                        </div>
                                        <!-- // form item -->
                                        
                                        <label for="formA28a">Appended Prepend Button dropdowns</label>
                                        <div class="input-append">
                                            <input type="text" id="formA28a" class="span4">
                                            <div class="btn-group">
                                                <button data-toggle="dropdown" class="btn dropdown-toggle">Action <span class="caret"></span></button>
                                                <ul class="dropdown-menu">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div>
                                            <!-- /btn-group --> 
                                        </div>
                                        <!-- // form item -->
                                        
                                        <div class="input-prepend">
                                            <div class="btn-group">
                                                <button data-toggle="dropdown" class="btn dropdown-toggle">Action <span class="caret"></span></button>
                                                <ul class="dropdown-menu">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div>
                                            <!-- /btn-group -->
                                            <input type="text" id="formA28b" class="span4">
                                        </div>
                                        <!-- // form item -->
                                        
                                        <div class="input-prepend input-append">
                                            <div class="btn-group">
                                                <button data-toggle="dropdown" class="btn dropdown-toggle">Action <span class="caret"></span></button>
                                                <ul class="dropdown-menu">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div>
                                            <!-- /btn-group -->
                                            <input type="text" id="formA28c" class="span3">
                                            <div class="btn-group">
                                                <button data-toggle="dropdown" class="btn btn-yellow dropdown-toggle">Action <span class="caret"></span></button>
                                                <ul class="dropdown-menu">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div>
                                            <!-- /btn-group --> 
                                        </div>
                                        <!-- // form item -->
                                    </fieldset>
                                    <!-- // fieldset Prepended and appended Buttons --> 
                                </div>
                            </div>
                            <!-- // Sample row -->
                            <div class="row-fluid margin-bottom30">
                                <div class="span5">
                                    <fieldset>
                                        <legend>Control states</legend>
                                        <div class="control-group warning">
                                            <label for="formA29">Input with warning</label>
                                            <input id="formA29" type="text">
                                            <span class="help-inline">Something may have gone wrong</span> </div>
                                        <!-- // form item -->
                                        
                                        <div class="control-group error">
                                            <label for="formA30">Input with error</label>
                                            <input id="formA30" type="text">
                                            <span class="help-inline">Please correct the error</span> </div>
                                        <!-- // form item -->
                                        
                                        <div class="control-group info">
                                            <label for="formA31">Input with info</label>
                                            <input id="formA28" type="text">
                                            <span class="help-inline">Please correct the error</span> </div>
                                        <!-- // form item -->
                                        
                                        <div class="control-group success">
                                            <label for="formA32">Input with success</label>
                                            <input id="formA32" type="text">
                                            <span class="help-inline">Woohoo!</span> </div>
                                        <!-- // form item -->
                                        
                                        <div class="control-group">
                                            <label for="formA33">Focused input:</label>
                                            <input id="formA33" class="focused" type="text" placeholder="This is focused...">
                                        </div>
                                        <!-- // form item -->
                                        
                                        <div class="control-group">
                                            <label>Uneditable input:</label>
                                            <span class="uneditable-input">This is uneditable</span> </div>
                                        <!-- // form item -->
                                        
                                        <div class="control-group">
                                            <label for="formA35">Disabled input:</label>
                                            <input id="formA35" type="text" placeholder="This is disabled..." disabled>
                                        </div>
                                        <!-- // form item -->
                                        
                                        <div class="control-group error">
                                            <label for="formA35a">Select with error:</label>
                                            <select id="form35a">
                                                <option value="1">This is Error...</option>
                                                <option value="2">item 2</option>
                                                <option value="3">item 3</option>
                                                <option value="4">item 4</option>
                                            </select>
                                        </div>
                                        <!-- // form item -->
                                        
                                        <div class="control-group error">
                                            <label for="formA35b">SelectTwo with error:</label>
                                            <select id="form35b" class="selecttwo" style="width:220px">
                                                <option value="1">This is Error...</option>
                                                <option value="2">item 2</option>
                                                <option value="3">item 3</option>
                                                <option value="4">item 4</option>
                                            </select>
                                        </div>
                                        <!-- // form item -->
                                        
                                        <div class="control-group">
                                            <label for="formA36">Disabled select:</label>
                                            <select id="form36" disabled>
                                                <option value="1">This is disabled...</option>
                                                <option value="2">item 2</option>
                                                <option value="3">item 3</option>
                                                <option value="4">item 4</option>
                                            </select>
                                        </div>
                                        <!-- // form item -->
                                    </fieldset>
                                    <!-- // fieldset Input --> 
                                </div>
                                <div class="span7 well well-nice">
                                    <fieldset>
                                        <legend>Sizing elements</legend>
                                        <ul class="form-list">
                                            <li>
                                                <label>Relative sizing for Input, Select, Textarea</label>
                                                <input class="input-mini" type="text" placeholder=".input-mini">
                                            </li>
                                            <li>
                                                <input class="input-small" type="text" placeholder=".input-small">
                                            </li>
                                            <li>
                                                <input class="input-medium" type="text" placeholder=".input-medium">
                                            </li>
                                            <li>
                                                <input class="input-large" type="text" placeholder=".input-large">
                                                <p class="help-block"><strong>or next:</strong> .input-xlarge .input-xxlarge </p>
                                            </li>
                                            <li>
                                                <div class="controls">
                                                    <label>Block level</label>
                                                    <input type="text" placeholder=".input-block-level" class="input-block-level">
                                                </div>
                                                <p class="help-block">Make any <code>&lt;input&gt;</code> or <code>&lt;textarea&gt;</code> element behave like a block level element.</p>
                                            </li>
                                        </ul>
                                        <!-- // form item -->
                                        
                                        <ul class="form-list">
                                            <li>
                                                <label>Grid sizing</label>
                                                <input class="span1" type="text" placeholder=".span1">
                                            </li>
                                            <li>
                                                <input class="span2" type="text" placeholder=".span2">
                                            </li>
                                            <li>
                                                <input class="span3" type="text" placeholder=".span3">
                                            </li>
                                            <li>
                                                <select class="span4">
                                                    <option value="1">span4</option>
                                                    <option value="2">item 2</option>
                                                    <option value="3">item 3</option>
                                                    <option value="4">item 4</option>
                                                </select>
                                            </li>
                                            <li>
                                                <select class="span5">
                                                    <option value="1">span5</option>
                                                    <option value="2">item 2</option>
                                                    <option value="3">item 3</option>
                                                    <option value="4">item 4</option>
                                                </select>
                                            </li>
                                            <li>
                                                <select class="span6">
                                                    <option value="1">span6</option>
                                                    <option value="2">item 2</option>
                                                    <option value="3">item 3</option>
                                                    <option value="4">item 4</option>
                                                </select>
                                            </li>
                                            <li>
                                                <textarea class="span7" rows="3">span7</textarea>
                                                <p class="help-block"><strong>or next:</strong> .span8 .... .span12 </p>
                                            </li>
                                            <li>
                                                <label>Block level</label>
                                                <textarea class="input-block-level" rows="3">input-block-level</textarea>
                                                <p class="help-block"><strong>Block level inputs:</strong> .input-block-level. </p>
                                            </li>
                                        </ul>
                                        <!-- // form item -->
                                    </fieldset>
                                    <!-- // fieldset Input Grid Sizig --> 
                                </div>
                            </div>
                            <!-- // Sample row -->
                            <div class="row-fluid margin-bottom30">
                                <div class="span5">
                                    <fieldset>
                                        <legend>Form Layouts <small>Search, Inline, Horizontal</small></legend>
                                        <div class="form-search well well-nice">
                                            <h4 class="simple-header">Search form</h4>
                                            <input type="text" class="input-medium search-query">
                                            <button class="btn" type="submit">Search</button>
                                            <hr class="margin-mx">
                                            <p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>&lt;input&gt;</code> for an extra-rounded text input.</p>
                                        </div>
                                        <!-- // form search -->
                                        
                                        <div class="form-inline well well-nice">
                                            <h4 class="simple-header">Inline form</h4>
                                            <input type="text" placeholder="Email" class="input-small">
                                            <input type="password" placeholder="Password" class="input-small">
                                            <label class="checkbox">
                                                <input type="checkbox">
                                                Remember me </label>
                                            <button class="btn" type="submit">Sign in</button>
                                            <hr class="margin-mx">
                                            <p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
                                        </div>
                                        <!-- // form inline -->
                                        
                                        <div class="form-horizontal well well-nice">
                                            <h4 class="simple-header">Horizontal form</h4>
                                            <div class="control-group">
                                                <label for="inputEmail" class="control-label">Email</label>
                                                <div class="controls">
                                                    <input type="text" placeholder="Email" id="inputEmail">
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label for="inputPassword" class="control-label">Password</label>
                                                <div class="controls">
                                                    <input type="password" placeholder="Password" id="inputPassword">
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <div class="controls">
                                                    <label class="checkbox">
                                                        <input type="checkbox">
                                                        Remember me </label>
                                                    <button class="btn" type="submit">Sign in</button>
                                                </div>
                                            </div>
                                            <hr class="margin-mx">
                                            <ul>
                                                <li>Add <code>.form-horizontal</code> to the form</li>
                                                <li>Wrap labels and controls in <code>.control-group</code></li>
                                                <li>Add <code>.control-label</code> to the label</li>
                                                <li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>
                                            </ul>
                                        </div>
                                        <!-- // form horizontal -->
                                        
                                    </fieldset>
                                    <!-- // fieldset Input --> 
                                </div>
                                <div class="span7 well well-nice">
                                    <fieldset>
                                        <legend>Multiple inputs per line <small>GRID SIZING</small></legend>
                                        <div class="controls">
                                            <input class="span9" type="text" placeholder=".span9">
                                        </div>
                                        <!-- // form item -->
                                        
                                        <div class="controls controls-row">
                                            <input class="span5" type="text" placeholder=".span5">
                                            <input class="span1" type="text" placeholder=".span1">
                                            <input class="span3" type="text" placeholder=".span3">
                                        </div>
                                        <!-- // form item -->
                                        
                                        <div class="controls controls-row">
                                            <input class="span4" type="text" placeholder=".span4">
                                            <input class="span2" type="text" placeholder=".span2">
                                        </div>
                                        <!-- // form item -->
                                        
                                        <div class="controls controls-row">
                                            <input class="span3" type="text" placeholder=".span3">
                                            <input class="span3" type="text" placeholder=".span3">
                                        </div>
                                        <!-- // form item -->
                                        
                                        <div class="controls controls-row">
                                            <input class="span2" type="text" placeholder=".span2">
                                            <input class="span4" type="text" placeholder=".span4">
                                            <input class="span3" type="text" placeholder=".span3">
                                        </div>
                                        <!-- // form item -->
                                        
                                        <div class="controls controls-row">
                                            <input class="span1" type="text" placeholder=".span1">
                                            <input class="span5" type="text" placeholder=".span5">
                                            <input class="span1" type="text" placeholder=".span1">
                                            <input class="span2" type="text" placeholder=".span2">
                                        </div>
                                        <!-- // form item -->
                                        
                                        <div class="controls controls-row">
                                            <textarea class="span6" rows="3" placeholder="span6"></textarea>
                                            <textarea class="span3" rows="3" placeholder="span3"></textarea>
                                        </div>
                                        <!-- // form item -->
                                    </fieldset>
                                    <!-- // fieldset Input Grid Sizig -->
                                    
                                    <hr class="margin-mx">
                                    <div class="form-horizontal form-dark well well-nice">
                                        <h4 class="simple-header">Style form <small>dark form elements</small></h4>
                                        <div class="control-group">
                                            <label for="inputEmail" class="control-label">Email</label>
                                            <div class="controls">
                                                <input type="text" placeholder="Email" id="inputEmail">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label for="inputPassword" class="control-label">Password</label>
                                            <div class="controls">
                                                <input type="password" placeholder="Password" id="inputPassword">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <div class="controls">
                                                <label class="checkbox">
                                                    <input type="checkbox">
                                                    Remember me </label>
                                                <button class="btn" type="submit">Sign in</button>
                                            </div>
                                        </div>
                                        <hr class="margin-mx">
                                        <p>Add next class <code>.form-dark</code> for color elements.</p>
                                        <p>Combine <code>.well</code> in<code>.well</code> for color background. Boo offers a large number of classes for combinable appearance. More in demo </p>
                                    </div>
                                    <!-- // form horizontal --> 
                                </div>
                            </div>
                            <!-- // Sample row -->
                        </form>
                    </div>
                </section>
            </div>
            <!-- // page content --> 
            
        </div>
        <!-- // main-content --> 
        
    </div>
    <!-- // main-container  -->
    
    <footer id="footer-fix">
        <div id="footer-sidebar" class="footer-sidebar">
            <div class="navbar">
                <div class="btn-toolbar"> <a class="btn btn-glyph btn-link" href="javascript:void(0);"><i class="fontello-icon-up-open-1"></i></a> </div>
            </div>
        </div>
        <!-- // footer sidebar -->
        
        <div id="footer-content" class="footer-content">
            <div class="navbar navbar-inverse">
                <div class="navbar-inner">
                    <ul class="nav pull-left">
                        <li class="divider-vertical hidden-phone"></li>
                        <li><a id="btnToggleSidebar" class="btn-glyph fontello-icon-resize-full-2 tip hidden-phone" href="javascript:void(0);" title="show hide sidebar"></a></li>
                        <li class="divider-vertical hidden-phone"></li>
                        <li><a id="btnChangeSidebar" class="btn-glyph fontello-icon-login tip hidden-phone" href="javascript:void(0);" title="change sidebar position"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a id="btnChangeSidebarColor" class="btn-glyph fontello-icon-palette tip" href="javascript:void(0);" title="change sidebar color"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a class="btn-glyph fontello-icon-cw" href="javascript:void(0);"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a class="fontello-icon-home-3" href="dashboard-one.html"></a></li>
                        <li class="divider-vertical"></li>
                    </ul>
                    <ul class="nav pull-right">
                        <li class="divider-vertical"></li>
                        <li><a class="btn-glyph fontello-icon-help-2 tip" href="javascript:void(0);" title="help to page"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a class="btn-glyph fontello-icon-cog-4 tip" href="javascript:void(0);" title="settings app"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a id="btnLogout" class="btn-glyph fontello-icon-logout-1 tip" href="javascript:void(0);" title="logout"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a id="btnScrollup" class="scrollup btn-glyph fontello-icon-up-open-1" href="javascript:void(0);"><span class="hidden-phone">Scroll</span></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- // footer content --> 
        
    </footer>
    <!-- // footer-fix  --> 
    
</div>
<!-- // page-container  --> 

<!-- Le javascript --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="assets/plugins/bootstrap-wysihtml5/lib/js/wysihtml5-0.3.0.min.js"></script> 
<script src="assets/js/lib/jquery.js"></script> 
<script src="assets/js/lib/jquery-ui.js"></script>
<script src="assets/js/lib/bootstrap.js"></script> 
<script src="assets/js/lib/jquery.cookie.js"></script> 

<!-- Plugins Bootstrap --> 
<script src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script> 
<script src="assets/plugins/bootstrap-timepicker/js/bootstrap-timepicker.js"></script> 
<script src="assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script> 
<script src="assets/plugins/bootstrap-daterangepicker/js/date.js"></script> 
<script src="assets/plugins/bootstrap-daterangepicker/js/bootstrap-daterangepicker.js"></script> 
<script src="assets/plugins/bootstrap-fileupload/js/bootstrap-fileupload.js"></script> 
<script src="assets/plugins/bootstrap-rowlink/js/bootstrap-rowlink.js"></script> 
<script src="assets/plugins/bootstrap-progressbar/js/bootstrap-progressbar.js"></script> 
<script src="assets/plugins/bootstrap-wysihtml5/src/bootstrap-wysihtml5.js"></script> 
<script src="assets/plugins/bootstrap-select/bootstrap-select.js"></script>
<script src="assets/plugins/bootstrap-bootbox/bootbox.min.js"></script> 
<script src="assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script> 
<script src="assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
<script src="assets/plugins/bootstrap-wizard/js/bootstrap-wizard.js"></script> 
<script src="assets/plugins/bootstrap-toggle-buttons/js/bootstrap-toggle-buttons.js"></script>

<!-- Plugins Custom -->
<script src="assets/plugins/google-code-prettify/prettify.js"></script> 
<script src="assets/plugins/nicescroll/jquery.nicescroll.min.js"></script> 
<script src="assets/plugins/qtip2/dist/jquery.qtip.min.js"></script> 
<script src="assets/plugins/list/js/list.min.js"></script> 
<script src="assets/plugins/list/plugins/list.paging.min.js"></script> 
<script src="assets/plugins/fullcalendar/fullcalendar.js"></script> 

<!-- Plugins Forms --> 
<script src="assets/plugins/uniform/jquery.uniform.js"></script> 
<script src="assets/plugins/select2/select2.min.js"></script> 
<script src="assets/plugins/counter/jquery.counter.js"></script> 
<script src="assets/plugins/elastic/jquery.elastic.js"></script> 
<script src="assets/plugins/inputmask/jquery.inputmask.js"></script> 
<script src="assets/plugins/inputmask/jquery.inputmask.extensions.js"></script> 
<script src="assets/plugins/validate/js/jquery.validate.min.js"></script> 
<script src="assets/plugins/xbreadcrumbs/xbreadcrumbs.js"></script> 

<!-- Charts --> 
<script src="assets/plugins/sparkline/jquery.sparkline.js"></script> 
<script src="assets/plugins/flot/jquery.flot.js"></script> 
<script src="assets/plugins/flot/jquery.flot.categories.js"></script> 
<script src="assets/plugins/flot/jquery.flot.grow.js"></script> 
<script src="assets/plugins/flot/jquery.flot.orderBars.js"></script> 
<script src="assets/plugins/flot/jquery.flot.pie.js"></script> 
<script src="assets/plugins/flot/jquery.flot.resize.js"></script> 
<script src="assets/plugins/flot/jquery.flot.selection.js"></script> 
<script src="assets/plugins/flot/jquery.flot.stack.js"></script> 
<script src="assets/plugins/flot/jquery.flot.stackpercent.js"></script> 
<script src="assets/plugins/flot/jquery.flot.time.js"></script> 

<!-- Plugins Tables --> 
<script src="assets/plugins/datatables/media/js/jquery.dataTables.js"></script> 
<script src="assets/plugins/datatables/plugin/jquery.dataTables.plugins.js"></script> 
<script src="assets/plugins/datatables/plugin/jquery.dataTables.columnFilter.js"></script> 

<!-- main js -->
<script src="assets/js/application.js"></script>  

<!-- Only This Demo Page -->
<script>
        $('#default-tgbtn').toggleButtons();
        
        $('#text-tgbtn').toggleButtons({
                width: 200,
                label: {
                        enabled: "Lorem Ipsum",
                        disabled: "Dolor Sit"
                },
                onChange: function ($el, status, e) {
                        console.log($el, status, e);
                        $('#tgbtn-text').html("Status is: <strong>" + status + "</strong>");
                }
        });
        
        $('#warning-tgbtn').toggleButtons({
                style: {
                        enabled: "warning",
                        disabled: "danger"
                }
        });
        
        
        $('#danger-tgbtn').toggleButtons({
                style: {
                        enabled: "danger",
                        disabled: "info"
                }
        });
        
        
        $('#info-tgbtn').toggleButtons({
                style: {
                        enabled: "info",
                        disabled: "success"
                }
        });
        
        
        $('#success-tgbtn').toggleButtons({
                style: {
                        enabled: "success",
                        disabled: "warning"
                }
        });
        $('#blue-tgbtn').toggleButtons({
                style: {
                        enabled: "blue",
                        disabled: "red"
                }
        });
        $('#red-tgbtn').toggleButtons({
                style: {
                        enabled: "red"
                }
        });
        $('#turgu-tgbtn').toggleButtons({
                style: {
                        enabled: "turgu",
                        disabled: "red"
                }
        });
        $('#orange-tgbtn').toggleButtons({
                style: {
                        enabled: "orange",
                        disabled: "red"
                }
        });
        $('#green-tgbtn').toggleButtons({
                style: {
                        enabled: "green",
                        disabled: "red"
                }
        });
        
        $('#yellow-tgbtn').toggleButtons({
                style: {
                        enabled: "yellow",
                        disabled: "red"
                }
        });
</script> 

</body>
</html>